<template>
	<view class="integral-com">
		<view class="header flex-between">
			<view>
				<text class="integral">{{ userStore.userInfo.score }}</text>
				<text style="font-weight: 500;">积分</text>
			</view>
			<view @click="handleDetail">
				<text class="text">积分明细</text>
				<wd-icon name="arrow-right" size="18px" color='#BDBCBC'></wd-icon>
			</view>
		</view>
		
		<view class="integral-view">
			<view class="title">好友邀请计划:</view>
			<view class="content">用户可以通过微信邀请自己的好友加入Happy的大家庭。邀请成功后邀请人可以获得被邀请人消费金额的10%的积分。当别邀请人也邀请了他的朋友，则邀请人可以在邀请人的朋友消费时，获得消费金额1%的积分作为奖励.</view>
			<button open-type="share" class="btn-share">邀请好友获得积分</button>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { useUserStore } from '@/store/user'
	const userStore = useUserStore()
	
	function handleDetail() {
		uni.navigateTo({
			url: '/pages-sub/integral/details'
		})
	}
</script>

<style lang="scss" scoped>
	.integral-com {
		border-radius: 8px;
		/* Shadow Grey */
		box-shadow: 0px 8px 10px 0px rgba(241, 244, 249, 1);
		background-color: #fff;
		padding: 15px;
		
		.header {
			padding-bottom: 7px;
			border-bottom: 1px solid #E6E6E6;
			font-size: 14px;
			
			> view {
				display: flex;
				align-items: center;
			}
			.integral {
				font-size: 36px;
				line-height: 30px;
				color: $uni-main-color;
				padding-right: 9px;
				font-family: Source Han Sans CN;
			}
			
			.text {
				font-size: 14px;
				line-height: 20px;
				color: #BDBCBC;
			}
		}
		
		.integral-view {
			padding-top: 14px;
			font-weight: 600;

			.title {
				color: #000;
				font-size: 14px;
				line-height: 24px;
			}
			.content {
				color: #8E8E93;
				font-size: 14px;
				line-height: 24px;
			}
			
			.btn-share {
				border-radius: 8px;
				background-color: $uni-main-color;
				margin: 8px 10px 0 10px;
				text-align: center;
				padding: 8px 0;
				color: #fff;
				font-size: 18px;
				line-height: 24px;
				outline: none;
				border: none;
				&:active {
					background-color: rgba($uni-main-color, 0.9)
				}
			}
		}
	}
</style>